<template>
  <div>
    <mainFrame>
      <div slot='content'>
        <ttForm v-model="form">
          <div slot='slot'>
            <el-form-item label="台区">
              <div class="top" style="margin: 10px 0;">
                <el-button type="primary" icon="el-icon-plus" @click='isShowDialog = true'>添加台区</el-button>
              </div>
              <el-table :data="userItems" v-if='userItems.length>0' style="width: 600px;">
                <el-table-column property="location" label="归属地"></el-table-column>
                <el-table-column property="areaNo" label="台区号"></el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button size="primary" round @click="del(scope.row)" type='danger'>删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-form-item>
          </div>
        </ttForm>
        <el-dialog title="添加台区" :visible.sync="isShowDialog">
          <el-form :inline="true" :model="area" class="demo-form-inline">
            <el-form-item label="归属地">
              <el-input v-model="area.location" placeholder="请输入归属地"></el-input>
            </el-form-item>
            <el-form-item label="台区号">
              <el-input v-model="area.areaNo" placeholder="请输入台区号"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="getAreas()">查询</el-button>
            </el-form-item>
          </el-form>
          <el-table :data="items">
            <el-table-column property="location" label="归属地"></el-table-column>
            <el-table-column property="areaNo" label="台区号"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button size="primary" round @click="add(scope.row)">添加</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-dialog>
      </div>
    </mainFrame>
  </div>
</template>
<script>
import mainFrame from '@/components/mainFrame'
import utils from '../ttJs/utils.js'
import ttForm from '@/tt_components/ttForm'
export default {
  components: {
    mainFrame,
    ttForm
  },
  data() {
    return {
      area: {
        location: '',
        areaNo: ''
      },
      userId: null,
      items: [],
      userItems: [],
      ids: '',
      userRole: null,
      isShowDialog: false,
      form: {
        id: null,
        url: '/yitai/admin/user/submit',
        items: [
          { name: 'account', value: '', label: '用户名', placeholder: '请输入用户名', type: 'input', rules: true, msg: '用户名不能为空', style: 'width:200px;' },
          { name: 'password', value: '', label: '密码', placeholder: '请输入密码', type: 'input', rules: true, msg: '密码不能为空', style: 'width:200px;' },
          { name: 'ids', value: '' },
          { name: 'role', value: 2, list: [{ id: 2, title: '普通用户' }, { id: 1, title: '管理员' }], label: '权限', placeholder: '请选择权限', type: 'select', style: 'width:200px;' },
        ]
      },
    };
  },
  mounted: function() {
    var self = this
    self.userRole = sessionStorage.getItem('role')
    self.getInfo()
    if (self.userRole != 0) {
      self.form.items.splice(3, 1)
    }
  },
  watch: {
    isShowDialog: function(val) {
      if (val) {
        this.getAreas();
      }
    }
  },
  methods: {
    getInfo() {
      var self = this
      if (utils.validateData(self.$route.query.id)) {
        self.userId = self.$route.query.id
        self.form.id = self.$route.query.id
        self.getUserAreas(self.userId)
        var url = '/yitai/admin/user/userInfo';
        var params = { userId: self.userId }
        var success = function(response) {
          var info = response.info;
          var items = self.form.items
          for (var index in items) {
            for (var key in info) {
              if (items[index].name == key) {
                items[index].value = info[key]
              }
            }
          }
        }
        var fail = function() {}
        var complete = function() {}
        utils.requestLoading(url, params, success, fail, complete)
      }
    },
    getUserAreas(userId) {
      var self = this
      var url = '/yitai/admin/user/userAreas';
      var params = { userId: userId }
      var success = function(response) {
        var info = response.info;
        self.userItems = info
        for (var i in self.userItems) {
          self.userItems[i].fixed = true
        }
      }
      var fail = function() {}
      var complete = function() {}
      utils.requestLoading(url, params, success, fail, complete)
    },
    getAreas() {
      var self = this;
      var url = '/yitai/admin/area';
      var params = {
        location: this.area.location,
        areaNo: this.area.areaNo
      };
      var success = function(response) {
        self.items = response.info
      }
      var fail = function() {}
      var complete = function() {}
      utils.requestLoading(url, params, success, fail, complete)
    },
    add(item) {
      var self = this
      for (var i = 0; i < self.userItems.length; i++) {
        if (self.userItems[i].fixed) {
          if (item.id == self.userItems[i].areaId) {
            utils.fail('已经添加过一次了')
            return
          }
        }
        if (item.id == self.userItems[i].id) {
          utils.fail('已经添加过一次了')
          return
        }
      }
      self.userItems.push(item)
      self.getIds()
    },
    del(item) {
      var self = this
      if (item.fixed) {
        var url = '/yitai/admin/user/removeArea';
        var params = { id: item.id, userId: self.userId }
        var success = function(response) {
          for (var i = 0; i < self.userItems.length; i++) {
            if (item.id == self.userItems[i].id) {
              self.userItems.splice(i, 1)
            }
          }
        }
        var fail = function() {}
        var complete = function() {}
        utils.requestLoading(url, params, success, fail, complete)
      } else {
        for (var i = 0; i < self.userItems.length; i++) {
          if (item.id == self.userItems[i].id) {

            self.userItems.splice(i, 1)
          }
        }
        self.getIds()
      }
    },
    getIds() {
      var self = this
      self.ids = ''
      for (var i = 0; i < self.userItems.length; i++) {
        if (self.userItems[i].fixed) {
          continue;
        }
        self.ids = self.ids + self.userItems[i].id + ';'
      }
      self.form.items[2].value = self.ids
    }
  },
}

</script>
<style scoped rel="stylesheet/scss" lang="scss">
.page {
  position: relative;
  overflow: hidden;
  padding: 20px;
}

</style>
